<template>
  <div class="strategy-detail-wrapper">
    <v-header ref="header" :fixed='true' :title="strategyDetail.content"></v-header>
    <div class="main" ref="main" v-if="!isLoadFail" :style="{paddingTop: 55 + 'px', paddingBottom: paddingBottom + 'px'}">
      <p class="title">{{strategyDetail.content}}</p>
      <ul>
        <li v-for="(item, index) in strategyDetail.list" :key="index" ref="item">
          <p v-if="item.type == 2" class="section">{{item.content}}</p>
          <p v-else-if="item.type == 3" class="text">{{item.content}}</p>
          <p v-else-if="item.type == 4">
            <img  :src="item.content" width="100%"/>
          </p>
        </li>
      </ul>
    </div>
    <load-fail v-if="isLoadFail" :tip="tip"></load-fail>

    <div class="category-btn" @click.stop="showCategory = true">目录</div>
    <!-- 目录 -->
    <div v-transfer-dom>
      <popup v-model="showCategory" position="right" width="60%" class="popup-wrapper">
        <div class="category">
          <p class="cate-top"  :style="{paddingTop: paddingTop + 20 + 'px'}">- 目录 -</p>
          <ul :style="{paddingBottom: paddingBottom + 'px'}">
            <li @click="showCategory = false" style="color: #fff">
              <p class="cate-title">{{strategyDetail.content}}</p>
            </li>
            <ul class="cate-section">
              <li v-for="(section, index2) in strategyDetail.list" :key="index2" v-if="section.type === 2" @click.stop="toSection(index2)">
                <p>{{section.content}}</p>
              </li>
            </ul>
          </ul>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import LoadFail from '@/components/load-fail/load-fail'
import { TransferDom, Popup } from 'vux'

import axios from '@/api/axiosApi'
import { isIphoneX } from '@/assets/js/brower'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'StrategyDetail',
  mixins: [handleBackMixin],
  data() {
    return {
      isLoadFail: false,
      showCategory: false,
      tip: '',
      strategyDetail: {},
      allPopupModels: ['showCategory']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, LoadFail, Popup
  },
  created() {
    this.paddingBottom = 0
    this.paddingTop = 20
    if (isIphoneX()) {
      this.paddingBottom = 34
      this.paddingTop = 34
    }

    this._getStrategy()
  },
  mounted() {
    this.$refs.main.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight + 'px'
  },
  methods: {
    _getStrategy() {
      axios.get(this, '/v1/playStrategy', {
        id: this.$route.params.strategyId
      }, (data) => {
        if (data == null || data.length === 0) {
          this.tip = '页面加载失败<br>没有找到该攻略，或者该攻略已下架'
          this.isLoadFail = true
          return
        }
        data[0].articleContent = JSON.parse(data[0].articleContent)
        // 处理数据格式
        const tmp = []
        let currentIndex = -1
        data[0].articleContent.forEach((item, index) => {
          if (item.type === 1) {
            item.list = []
            tmp.push(item)
            currentIndex++
          } else {
            tmp[currentIndex].list.push(item)
          }
        })
        // titleIndex必传
        this.strategyDetail = tmp[this.$route.query.titleIndex]
        if (this.$route.query.sectionIndex) {
          this.$nextTick(() => {
            const el = this.$refs.item[this.$route.query.sectionIndex]
            if (el) {
              this.$refs.main.scrollTo({
                top: el.offsetTop - 68,
                behavior: 'smooth'
              })
            }
          })
        }
      }, (e) => {
        this.tip = '页面加载失败<br>网络错误'
        this.isLoadFail = true
      })
    },
    toSection(index) {
      this.showCategory = false
      const el = this.$refs.item[index]
      if (el) {
        this.$refs.main.scrollTo({
          top: el.offsetTop - 68,
          behavior: 'smooth'
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.strategy-detail-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color #ffffff
  z-index 100
.main
  color #333
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
  li
    padding 0 16px
    padding-bottom 12px
    &:first-child
      .section
        padding-top 0
.title
  font-size 16px
  color #333
  font-weight bold
  position relative
  padding-left 16px
  margin-top 16px
  margin-bottom 16px
  margin-left 16px
  &:before
    position absolute
    left 0
    top 4px
    bottom 4px
    width 4px
    border-radius 4px
    background-color $color-theme
    content ''
    display block
.section
  font-size 16px
  padding-top 16px
  color #333
  font-weight bold
.text
  font-size 15px
  text-align justify
  color #333
  line-height 1.6
.category-btn
  position fixed
  bottom 95px
  right -20px
  height 40px
  line-height 40px
  border-radius 20px
  padding-left 20px
  padding-right 30px
  background $color-theme
  color #f2f2f2
  box-shadow 0 0 10px #d0d0d0
  font-size 16px
.popup-wrapper
  background $color-theme
.category
  color #ececec
  height 100%
  padding-left 16px
  font-size 15px
  .cate-top
    font-size 24px
    font-weight bold
    text-align center
    padding-top 20px
    padding-bottom 16px
  .cate-title
    padding-left 4px
  .cate-section
    text-indent 2rem
    font-size 14px
    p
      line-height 38px
      height 38px
  li
    p
      border-bottom 0.5px solid rgba(255, 255, 255, 0.6)
      height 45px
      line-height 45px
      no-wrap()
</style>
